<!-- 动漫 -->

<template>
    <div style="width: 95%;margin: 0 auto;">
        <div class="animation-header">
            <a-card title="动漫">
                <div class="animation-header-des">
                    <div>凡人、狐妖、眷思量，总有一款适合你</div>
                    <div style="margin-top: 2px;">
                        奇怪的人往往做一些奇怪的事， 这一点也不奇怪。
                        如果提出的问题本身就有问题，那么答案又有什么用呢?
                        三十年河东三十年河西，莫欺少年穷。
                        想走的路不好走，想做人不好做，都说是身不由己，不是废话么。己不由心，身又岂能由己！
                    </div>
                    <div style="margin-top: 2px;font-style: italic;font-weight: bold;color:#03a9f4;">星空之所以美丽，就是因为在无限的宇宙中
                    </div>
                </div>
                <a-space wrap>
                    <a-tag checkable style="margin-right: 10px;" v-for="(year, index) of totalYears" :key="index"
                        :color="getTagColor()" @click="goAnchor('anchor-' + year)">
                        {{ year }}年
                    </a-tag>
                </a-space>
            </a-card>
        </div>


        <div class="animation-main">
            <a-card :bordered="false" style="margin-bottom: 25px;" v-for="item in animationList">
                <template #title>
                    <span :id="'anchor-'+item.year"></span>
                    <h2 style="font-size: 20px;font-weight: bold;">{{item.year+'年'}}</h2>
                    <span style="color:#ff9800;">{{annualReviewStr(item.year)}}</span>
                </template>

                <div>
                    <!-- 循环渲染出每个动漫信息 -->
                    <template v-for="animation in item.list">
                        <a-row class="list-item">
                            <!-- 视频信息 -->
                            <div class="video-info">
                                <!-- <img :src="animation.img" /> -->
                                <img class="list-item-img" width="160" height="200" v-lazy="animation.img" />
                                <div class="video-info-box">
                                    <div>
                                        <h3 class="video-info-title">{{animation.name}}</h3>
                                    </div>
                                    <div>
                                        <span>类型：</span>{{animation.category}}<br />
                                        <span>地区：</span>{{animation.region}}<br />
                                        <span>年份：</span>{{animation.year}}年<br />
                                        <span>导演：</span>{{animation.director}}<br />
                                        <!-- <span>状态：</span>更新至221集 <br /> -->
                                    </div>
                                    <div>
                                        <span>主演：</span>
                                        {{animation.actors}}
                                    </div>
                                    <!-- 简介 -->
                                    <div class="video-info-introduction">
                                        <span>简介：</span>
                                        {{animation.intro}}
                                    </div>
                                </div>
                            </div>
                            <!-- 点评 -->
                            <div class="video-comment">
                                <span>点评：</span>
                                <span class="video-comment-txt">
                                    {{animation.comment}}
                                </span>
                            </div>
                            <!-- 视频链接 -->
                            <div class="video-link">
                                <a-tag class="video-origin-link-tag" color="red">
                                    <a :href="animation.url" target="_blank">源站观看</a>
                                </a-tag>

                                <a-tag class="video-links-tag" color="purple" :checked="false"
                                    @click="getVideoLinks(animation.id)" style="margin-left: 20px;">显示链接</a-tag>
                                <div id="video-links" class="video-links" style="margin: 10px 0;"
                                    v-if="playlistIsVisible">
                                    <a-space wrap id="video-links-alist">
                                        <a-link style="font-size: 12px;"
                                            v-for="link in videoLinkListMap.get(animation.id)"
                                            @click="getRealLink(link.url)">
                                            {{link.name}}
                                        </a-link>
                                    </a-space>
                                </div>
                            </div>
                        </a-row>

                        <a-divider />
                    </template>

                </div>
            </a-card>
        </div>

    </div>

    <!-- 弹出视频播放窗口 -->
    <a-modal v-model:visible="playerIsShow" :width="1200" :hide-cancel="true" :closable="false" :esc-to-close="false"
        :mask-closable="false" okText="退出" @close="playerHandleClose"
        :body-style="{'height': '600px', 'width': '100%','padding': '0'}">
        <template #footer>
            <a-button type="primary" size="mini" @click="playerHandleClose">退出</a-button>
        </template>

        <iframe :src="videoRealPlaylink" style="height: 98.5%;width: 100%;z-index: 2000;" frameborder="0" border="0"
            marginwidth="0" marginheight="0" scrolling="no" allowfullscreen="allowfullscreen"
            mozallowfullscreen="mozallowfullscreen" msallowfullscreen="msallowfullscreen"
            oallowfullscreen="oallowfullscreen" webkitallowfullscreen="webkitallowfullscreen" security="restricted"
            sandbox="allow-same-origin allow-forms allow-scripts"></iframe>
    </a-modal>
</template>

<script>
    import { ref, onMounted, computed } from 'vue';
    import { Message } from '@arco-design/web-vue';
    import { getAll, getList, getYears, getAnimationLinks } from '../api/animation';
    import { getRealPlaylink } from '../api/playlink';
    import { getAnnualReviewList } from '../api/annualreview';

    export default {
        setup() {
            const tagColors = [
                '#f53f3f',
                '#7816ff',
                '#00b42a',
                '#165dff',
                '#ff7d00',
                '#eb0aa4',
                '#7bc616',
                '#b71de8',
                '#0fc6c2',
                '#ffb400',
                '#168cff',
                '#ff5722',
            ];
            const totalYears = ref([]);   // 全部年份
            const animationList = ref([]);    // 动漫列表
            const annualReviewList = ref([]);    // 动漫年度点评列表
            const videoLinkList = ref([]);    // 视频播放链接列表
            const videoLinkListMap = ref(new Map());    // 视频播放链接列表
            const playerIsShow = ref(false);  // 视频播放弹窗是否显示
            const videoRealPlaylink = ref('');    // 视频真实播放地址

            const totalPage = ref(0); // 总页数
            const pageNum = ref(1); // 当前页
            const pageSize = ref(8); // 每页大小

            // 获取年份标签颜色值
            const getTagColor = () => {
                return tagColors[Math.floor((Math.random() * (tagColors.length + 1)))];
            };

            // 锚点跳转
            const goAnchor = (e) => {
                var id = "#" + e;
                let el = document.querySelector(id);
                if (el) {
                    el.scrollIntoView({
                        behavior: "smooth",
                    });
                }
            }

            // 获取动漫列表
            const getAllList = () => {
                // 动漫列表数据
                getAll().then(res => {
                    if (res.code != 200) {
                        if (res.code != 200) {
                            Message.error("获取动漫列表失败");
                            return;
                        }
                    }
                    let animations = res.data;
                    // 排序，年份大的朝前
                    animationList.value = animations.sort((a, b) => b.year - a.year);
                }).catch(err => console.log(err));
            }


            // 分页获取动漫列表数据
            const getDataList = () => {
                // 分页获取动漫列表数据
                getList(pageSize.value, pageNum.value).then(res => {
                    if (res.code != 200) {
                        if (res.code != 200) {
                            Message.error("获取动漫列表失败");
                            return;
                        }
                    }
                    // 总页数
                    totalPage.value = res.totalPage;
                    let temList = animationList.value;
                    let list = temList.concat(res.data);
                    // 合并数组,排序(年份大的朝前)
                    animationList.value = list.sort((a, b) => b.year - a.year);
                }).catch(err => console.log(err));
            }


            // 获取动漫所有年份
            const getTotalYears = () => {
                // 获取年份
                getYears().then(res => {
                    if (res.code != 200) {
                        Message.error("获取Years失败");
                        return;
                    }
                    totalYears.value = res.data;
                });
            }


            // 获取动漫年度点评列表
            const getAnnualReviews = () => {
                getAnnualReviewList(3).then(res => {
                    if (res.code != 200) {
                        Message.error("获取年度点评数据失败");
                        return;
                    }
                    annualReviewList.value = res.data;
                }).catch(err => console.log(err));
            }


            // 计算属性，播放链接是否显示
            const playlistIsVisible = computed(() => (animationId) => {
                if (videoLinkListMap.value.has(animationId)) {
                    return true;
                }
                else {
                    return false;
                }
            });


            let oldVideoId = '';
            // 获取并显示视频连接
            const getVideoLinks = (animationId) => {
                if (videoLinkListMap.value.get(animationId) && animationId == oldVideoId) {   // 已经有数据
                    return;
                }

                // 获取视频集数链接
                getAnimationLinks(animationId).then(res => {
                    if (res.code != 200) {
                        Message.error("获取播放链接失败");
                        return;
                    }

                    videoLinkListMap.value.set(animationId, res.data);
                    // 记录旧的
                    oldVideoId = animationId;
                }).catch(err => { console.log(err); });
            };

            // 获取真实播放地址
            const getRealLink = (url) => {
                getRealPlaylink("animation", url).then(res => {
                    if (res.code != 200 || res.data == '') {
                        Message.error("获取地址失败");
                        return;
                    }
                    // videoRealPlaylink.value = res.data;
                    // playerIsShow.value = true;

                    window.open(res.data);

                }).catch(err => { console.log(err) });
            };

            // 退出视频播放
            const playerHandleClose = () => {
                videoRealPlaylink.value = '';
                playerIsShow.value = false;
            }

            // 计算属性，获取每一年度的点评语
            const annualReviewStr = computed(() => (y) => {
                var obj = annualReviewList.value.find(a => a.year == y);
                if (obj) {
                    return obj.comment;
                } else {
                    return '暂无';
                }
            });


            // 滚动到底部，再加载的处理事件
            const lazyLoading = () => {
                const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                const clientHeight = document.documentElement.clientHeight;
                const scrollHeight = document.documentElement.scrollHeight;

                if ((scrollTop + clientHeight) >= scrollHeight) {
                    // 滚动到底部，逻辑代码
                    pageNum.value++;
                    if (pageNum.value > totalPage.value) { return; }


                    getDataList();
                }
            };

            // 挂载完毕事件
            onMounted(() => {
                getTotalYears();
                // getAllList();
                getDataList();
                getAnnualReviews();

                // 滚动到底部，再加载的处理事件
                window.addEventListener('scroll', lazyLoading);
            });



            return {
                totalYears,
                animationList,
                videoLinkList,
                videoLinkListMap,
                playerIsShow,
                videoRealPlaylink,
                annualReviewStr,

                getTagColor,
                goAnchor,
                getVideoLinks,
                getRealLink,
                playerHandleClose,

                playlistIsVisible,
            }
        },
    }
</script>




<style scoped>
    :deep(.animation-main .arco-card .arco-card-header) {
        height: unset !important;
        background-color: #6fe4f0;
    }

    :deep(.animation-main .arco-card .arco-card-header .arco-card-header-title) {
        display: flex;
        flex-direction: column;
    }

    .animation-header {
        width: 100%;
        margin: 10px auto 0 auto;
    }

    .animation-header .arco-card-body {
        padding-top: 0 !important;
    }

    .animation-header-des {
        margin: 10px 0;
        font-size: 12px;
        margin: 0px 0px 10px !important;
        line-height: 16px;
    }

    .animation-main {
        margin-top: 30px;
        padding: 10px;
    }

    .list-item {
        width: 95%;
        margin: 15px 0;
    }

    .list-item-img {
        width: 160px;
        height: 200px;
        border-radius: 2px;
        vertical-align: middle;
        object-fit: cover;
    }

    .video-info {
        display: flex;
        flex-direction: row;
        width: 100%;
    }

    .video-info-box {
        margin: 0 15px;
        flex: 1;
        line-height: 16px;
        font-size: 12px;
    }

    .video-info-box span {
        color: #777;
    }

    .video-info-title {
        margin: 0 0 10px 0;
        font-size: 16px;
        color: #333;
        font-weight: 600;
    }

    .video-info-introduction {
        max-height: 90px;
        overflow-y: auto;
        /* text-overflow: ellipsis; */
    }

    .video-comment {
        width: 100%;
        margin-top: 10px;
    }

    .video-comment-txt {
        font-size: 14px;
        font-style: italic;
        font-weight: 500;
        color: #e6b406;
    }

    .video-links-tag:hover {
        cursor: pointer;
    }

    .video-origin-link-tag:hover {
        cursor: pointer;
    }

    .video-origin-link-tag a {
        text-decoration: none;
    }

    .video-link {
        width: 100%;
        margin-top: 10px;
    }
</style>